//获取button元素
const btn = document.getElementsByTagName('button')[0];
const result = document.getElementById('result');
//绑定事件
btn.onclick = function () {
  // 1.创建对象
  const xhr = new XMLHttpRequest();
  // 2.设置请求的方法和url
  // 路径传参
  xhr.open('GET', 'http://127.0.0.1:8000/server?a=100&b=200');
  // 3.发送
  xhr.send();
  // 4.事件绑定，处理服务端返回的结果
  // on when 当...时候
  // todo readystate 是 xhr 对象的属性，表示状态: 0初始化 1open方法调用完毕 2send方法已经调用完毕 3服务端返回的部分结果 4服务端返回所有的结果
  // change 改变 
  xhr.onreadystatechange = function () {
    if (xhr.readyState === 4) {
      // 判断响应状态码 200 404 403  500
      //2xx 成功
      if (xhr.status >= 200 && xhr.status < 300) {
        // 处理结果 行 头 空行 体
        // 1.响应行
        console.log(xhr.status); //状态码 200
        console.log(xhr.statusText); //状态字符串 OK
        console.log(xhr.getAllResponseHeaders()); //所有响应头 content-length: 17; content - type: text / html; charset = utf - 8
        console.log(xhr.response); //响应体 hello express get

        // 设置result文本
        result.innerHTML = xhr.response;
      } else {

      }
    }
  }
}